<template>
  <div class="user-page-container">
  <el-row :gutter="20" class="row-wrapper">
      <!-- 部门数据 -->
      <el-col :span="4" :xs="24" class="dept-col">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            prefix-icon="Search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="{ label: 'label', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="deptTreeRef"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>

      <!-- 用户数据 -->
      <el-col :span="20" :xs="24">
        <el-card shadow="never">
          <!-- 搜索栏 -->
          <el-form
            v-show="showSearch"
            ref="queryFormRef"
            :model="queryParams"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="用户名称" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入用户名称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input
                v-model="queryParams.phonenumber"
                placeholder="请输入手机号码"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="用户状态"
                clearable
                style="width: 240px"
              >
                <el-option label="正常" value="0" />
                <el-option label="停用" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="dateRange"
                style="width: 240px"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 操作按钮 -->
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleUpdate"
              >
                修改
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
              >
                删除
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" plain icon="Download" @click="handleExport">
                导出
              </el-button>
            </el-col>
          </el-row>

          <!-- 数据表格 Pro -->
          <DataTable
            :data="userList"
            :columns="tableColumns"
            :loading="loading"
            :pagination="paginationConfig"
            :on-page-change="handlePageChange"
            :tenant-id="tenantId"
            :user-id="userId"
            show-toolbar
            show-selection
            show-index
            column-resizable
            enable-column-setting
            enable-column-drag
            setting-id="system-app-user-management"
            stripe
            border
            @selection-change="handleSelectionChange"
            @refresh="getList"
            @search-toggle="showSearch = $event"
          >
            <!-- 状态列插槽 -->
            <template #status="{ row }">
              <el-switch
                v-model="row.status"
                active-value="0"
                inactive-value="1"
                :before-change="() => handleStatusBeforeChange(row)"
              />
            </template>

            <!-- 创建时间列插槽 -->
            <template #createTime="{ row }">
              <span>{{ parseTime(row.createTime) }}</span>
            </template>

            <!-- 操作列插槽 -->
            <template #action="{ row }">
              <template v-if="row.userId !== 1">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleUpdate(row)"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="danger"
                  size="small"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
                <el-dropdown
                  @command="(command) => handleCommand(command, row)"
                >
                  <el-button link type="primary" size="small">
                    更多
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="handleResetPwd">
                        重置密码
                      </el-dropdown-item>
                      <el-dropdown-item command="handleAuthRole">
                        分配角色
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </template>
          </DataTable>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog v-model="open" :title="title" width="600px" append-to-body >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId" required>
              <el-tree-select
                v-model="form.deptId"
                :data="enabledDeptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择归属部门"
                check-strictly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber" required>
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input
                v-model="form.password"
                placeholder="请输入用户密码"
                type="password"
                maxlength="20"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="0" />
                <el-option label="女" value="1" />
                <el-option label="未知" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds" required>
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status === '0'"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body :z-index="3000">
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
            </div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
            >
              下载模板
            </el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, getCurrentInstance, computed } from 'vue';
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
} from '@/api/system/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowDown, Setting } from '@element-plus/icons-vue';
import RightToolbar from '@/components/RightToolbar/index.vue';
import { DataTable } from '@tuxing/ui-components';
import { getCurrentUserId, getCurrentTenantId } from '@tuxing/utils-base';

defineOptions({
  name: 'User',
});

const { proxy } = getCurrentInstance() as any;
const userId = computed(() => getCurrentUserId());
const tenantId = computed(() => getCurrentTenantId());

const loading = ref(true);
const ids = ref<number[]>([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);

// DataTable Pro 列配置
const tableColumns = [
  { dataIndex: 'userId', label: '用户编号', width: 200, align: 'center', 'show-overflow-tooltip': true },
  { dataIndex: 'userName', label: '用户名称', minWidth: 120, 'show-overflow-tooltip': true },
  { dataIndex: 'nickName', label: '用户昵称', minWidth: 120, 'show-overflow-tooltip': true },
  { dataIndex: 'dept.deptName', label: '部门', minWidth: 120, 'show-overflow-tooltip': true },
  { dataIndex: 'phonenumber', label: '手机号码', width: 140, 'show-overflow-tooltip': true },
  { dataIndex: 'status', label: '状态', width: 100, slot: 'status', align: 'center' },
  { dataIndex: 'createTime', label: '创建时间', width: 180, slot: 'createTime' },
  { dataIndex: 'action', label: '操作', slot: 'action', width: 180, fixed: 'right', align: 'center' }
];

// 兼容旧的列配置（给右侧工具栏使用）
const columns = ref({
  userId: { label: '用户编号', visible: true },
  userName: { label: '用户名称', visible: true },
  nickName: { label: '用户昵称', visible: true },
  deptName: { label: '部门', visible: true },
  phonenumber: { label: '手机号码', visible: true },
  status: { label: '状态', visible: true },
  createTime: { label: '创建时间', visible: true }
});
const total = ref(0);
const userList = ref<any[]>([]);
const title = ref('');
const open = ref(false);
const deptName = ref('');
const deptOptions = ref<any[]>([]);
const enabledDeptOptions = ref<any[]>([]);
const initPassword = ref('123456');
const dateRange = ref<any[]>([]);
const postOptions = ref<any[]>([]);
const roleOptions = ref<any[]>([]);
const deptTreeRef = ref();
const queryFormRef = ref();
const formRef = ref();
const uploadRef = ref();

const upload = ref({
  open: false,
  title: '',
  isUploading: false,
  updateSupport: 0,
  headers: { Authorization: 'Bearer ' + proxy.$cookies.get('Admin-Token') },
  url: import.meta.env.VITE_APP_BASE_API + '/system/user/importData',
});

const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  userName: undefined,
  phonenumber: undefined,
  status: undefined,
  deptId: undefined,
});

const form = ref<any>({});

const rules = {
  userName: [
    { required: true, message: '用户名称不能为空', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' },
  ],
  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  password: [
    { required: true, message: '用户密码不能为空', trigger: 'blur' },
    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
    {
      pattern: /^[^<>"'|\\]+$/,
      message: "不能包含非法字符：< > \" ' \\\\ |",
      trigger: 'blur',
    },
  ],
  email: [
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change'],
    },
  ],
  deptId: [{ required: true, message: '请选择归属部门', trigger: 'change' }],
  phonenumber: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur',
    },
  ],
};

// 分页配置
const paginationConfig = computed(() => ({
  pageNum: queryParams.value.pageNum,
  pageSize: queryParams.value.pageSize,
  total: total.value
}));

// 监听部门名称变化，过滤树
watch(deptName, (val) => {
  deptTreeRef.value?.filter(val);
});

// 过滤节点
function filterNode(value: string, data: any) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

// 节点单击事件
function handleNodeClick(data: any) {
  queryParams.value.deptId = data.id;
  handleQuery();
}

// 过滤禁用的部门
function filterDisabledDept(deptList: any[]): any[] {
  return deptList.filter((dept) => {
    if (dept.disabled) {
      return false;
    }
    if (dept.children && dept.children.length) {
      dept.children = filterDisabledDept(dept.children);
    }
    return true;
  });
}

// 查询部门下拉树结构
function getDeptTree() {
  deptTreeSelect().then((response: any) => {
    deptOptions.value = response.data;
    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)));
  });
}

function getList(page?: number, size?: number) {
  // 来自分页组件的最新页码/页大小优先
  if (page !== undefined) queryParams.value.pageNum = page;
  if (size !== undefined) queryParams.value.pageSize = size;
  console.log('开始加载数据, loading设置为true');
  console.log('请求参数:', queryParams.value);
  loading.value = true;
  const params = proxy.addDateRange(queryParams.value, dateRange.value);
  listUser(params)
    .then((response: any) => {
      console.log('API 响应:', response);
      console.log('数据加载完成, loading设置为false');
      userList.value = response.rows || [];
      total.value = response.total || 0;
      console.log('用户列表:', userList.value);
      console.log('总数:', total.value);
      loading.value = false;
    })
    .catch((error) => {
      console.error('数据加载失败:', error);
      console.log('数据加载失败, loading设置为false');
      userList.value = [];
      total.value = 0;
      loading.value = false;
    });
}

// 分页变化处理
const handlePageChange = (page: number, size: number) => {
  console.log('分页变化:', page, size, 'loading状态:', loading.value);
  getList(page, size);
};

function cancel() {
  open.value = false;
  reset();
}

function reset() {
  form.value = {
    userId: undefined,
    deptId: undefined,
    userName: undefined,
    nickName: undefined,
    password: undefined,
    phonenumber: undefined,
    email: undefined,
    sex: undefined,
    status: '0',
    remark: undefined,
    postIds: [],
    roleIds: [],
  };
  formRef.value?.resetFields();
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  dateRange.value = [];
  queryFormRef.value?.resetFields();
  queryParams.value.deptId = undefined;
  deptTreeRef.value?.setCurrentKey(null);
  handleQuery();
}

function handleSelectionChange(selection: any[]) {
  ids.value = selection.map((item) => item.userId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 状态切换前的确认和处理
function handleStatusBeforeChange(row: any): Promise<boolean> {
  return new Promise((resolve, reject) => {
    // 切换后的状态文本（因为 before-change 是切换前调用，所以要反着来）
    const text = row.status === '0' ? '停用' : '启用';
    const userName = row.userName || row.nickName || '该';
    
    ElMessageBox.confirm(`确认要"${text}"用户"${userName}"吗？`, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        // 用户确认，执行状态切换
        const newStatus = row.status === '0' ? '1' : '0';
        changeUserStatus(row.userId, newStatus)
          .then(() => {
            ElMessage.success(text + '成功');
            resolve(true); // 允许开关切换
          })
          .catch(() => {
            ElMessage.error(text + '失败');
            reject(false); // 阻止开关切换
          });
      })
      .catch(() => {
        // 用户取消
        reject(false); // 阻止开关切换
      });
  });
}

function handleAdd() {
  reset();
  getUser().then((response: any) => {
    console.log('🔍 [User Add] 完整响应:', response);
    console.log('🔍 [User Add] response.data:', response.data);
    
    // 根据截图，数据在 response.data 中
    postOptions.value = response.data?.posts || [];
    roleOptions.value = response.data?.roles || [];
    
    console.log('🔍 [User Add] 设置后的 roleOptions:', roleOptions.value);
    console.log('🔍 [User Add] 表单数据:', form.value);
    
    open.value = true;
    title.value = '添加用户';
    form.value.password = initPassword.value;
  });
}

function handleUpdate(row?: any) {
  reset();
  const userId = row?.userId || ids.value[0];
  getUser(userId).then((response: any) => {
    console.log('🔍 [User Update] 完整响应:', response);
    console.log('🔍 [User Update] response.data:', response.data);
    
    form.value = response.data?.user || response.data;
    postOptions.value = response.data?.posts || [];
    roleOptions.value = response.data?.roles || [];
    form.value.postIds = response.data?.postIds || [];
    form.value.roleIds = response.data?.roleIds || [];
    
    console.log('🔍 [User Update] 设置后的 roleOptions:', roleOptions.value);
    
    open.value = true;
    title.value = '修改用户';
    form.value.password = '';
  });
}

function handleCommand(command: string, row?: any) {
  switch (command) {
    case 'handleResetPwd':
      handleResetPwd(row);
      break;
    case 'handleAuthRole':
      handleAuthRole(row);
      break;
    case 'columns':
      ElMessage.info('列设置功能待开发');
      break;
    case 'export':
      ElMessage.info('导出设置功能待开发');
      break;
    case 'refresh':
      getList();
      ElMessage.success('数据已刷新');
      break;
    default:
      break;
  }
}

function handleResetPwd(row: any) {
  ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^.{5,20}$/,
    inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
    inputValidator: (value) => {
      if (/<|>|"|'|\||\\/.test(value || '')) {
        return "不能包含非法字符：< > \" ' \\\\ |";
      }
      return true;
    },
  })
    .then(({ value }) => {
      resetUserPwd(row.userId, value!).then(() => {
        ElMessage.success('修改成功，新密码是：' + value);
      });
    })
    .catch(() => {});
}

function handleAuthRole(row: any) {
  // const userId = row.userId;
  // 这里可以跳转到分配角色页面，或者打开对话框
  ElMessage.info('分配角色功能待实现');
}

function submitForm() {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (form.value.userId != undefined) {
        updateUser(form.value).then(() => {
          ElMessage.success('修改成功');
          open.value = false;
          getList();
        });
      } else {
        addUser(form.value).then(() => {
          ElMessage.success('新增成功');
          open.value = false;
          getList();
        });
      }
    }
  });
}

function handleDelete(row?: any) {
  const userIds = row?.userId || ids.value.join(',');
  ElMessageBox.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(function () {
      return delUser(userIds);
    })
    .then(() => {
      getList();
      ElMessage.success('删除成功');
    })
    .catch(() => {});
}

function handleExport() {
  proxy.download(
    'system/user/export',
    {
      ...queryParams.value,
    },
    `user_${new Date().getTime()}.xlsx`
  );
}


function handleImport() {
  upload.value.title = '用户导入';
  upload.value.open = true;
}

function importTemplate() {
  proxy.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
}

function handleFileUploadProgress() {
  upload.value.isUploading = true;
}

function handleFileSuccess(response: any) {
  upload.value.open = false;
  upload.value.isUploading = false;
  uploadRef.value?.clearFiles();
  ElMessageBox.alert(
    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
      response.msg +
      '</div>',
    '导入结果',
    { dangerouslyUseHTMLString: true }
  );
  getList();
}

function submitFileForm() {
  const files = uploadRef.value?.uploadFiles;
  if (
    !files ||
    files.length === 0 ||
    (!files[0].name.toLowerCase().endsWith('.xls') && !files[0].name.toLowerCase().endsWith('.xlsx'))
  ) {
    ElMessage.error('请选择后缀为 "xls"或"xlsx"的文件。');
    return;
  }
  uploadRef.value?.submit();
}

getList();
getDeptTree();
</script>

<style scoped lang="scss">
@use '@/styles/common.scss';

// 页面容器 - 防止内容溢出
.user-page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

// 行容器 - 保留 gutter 系统，让 Element Plus 正常工作
.row-wrapper {
  height: 100%;
}

// 优化搜索表单间距
.el-form {
  margin-bottom: 8px;
  
  .el-form-item {
    margin-bottom: 12px;
  }
}

// 优化按钮组间距
.el-row.mb8 {
  margin-bottom: 8px;
}

// 优化左侧部门树的间距
.head-container {
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

// 优化左侧边栏样式
.el-col:first-child {
  .head-container {
    background: #fafafa;
    border: 1px solid #e4e7ed;
  }
}

// 优化表格容器样式
:deep(.data-table-wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

// 优化对话框表单间距
:deep(.el-dialog) {
  .el-form {
    .el-form-item {
      margin-bottom: 22px; // 增加底部间距以容纳错误信息
      
      // 当有错误信息时，调整间距
      &.is-error {
        margin-bottom: 24px;
        
        .el-form-item__error {
          margin-top: 2px;
          font-size: 12px;
          line-height: 1.2;
          padding: 0;
        }
      }
      
      // 当没有错误信息时，保持紧凑间距
      &:not(.is-error) {
        margin-bottom: 18px;
      }
    }
    
    .el-row {
      margin-bottom: 0;
      
      .el-col {
        padding-left: 8px;
        padding-right: 8px;
        
        &:first-child {
          padding-left: 0;
        }
        
        &:last-child {
          padding-right: 0;
        }
      }
    }
  }
  
  .el-dialog__body {
    padding: 20px 20px 0 20px;
  }
  
  .el-dialog__footer {
    padding: 10px 20px 20px 20px;
    text-align: right;
    
    .el-button + .el-button {
      margin-left: 8px;
    }
  }
}
</style>
